<template>
    <div class="public">
        <img src="../../static/img/common/hideImg.png" class="hideImg" @click="changeShow">
        <div class="left" v-show="showHide">
            <div class="markBg">
                <div class="title title1">游客出入闸机数据</div>
                <div class="dayDatasBox">
                    <div class="dayDatasLine">
                        <span>当日入园总识别数量</span>
                        <u v-if="deviceDatas.dayNumber != null" v-for="(item,index) in deviceDatas.dayNumber + ''"
                           :key="index">{{item}}</u>
                        <span>人</span>
                    </div>
                    <div class="dayDatasLine">
                        <span>当日出园总识别数量</span>
                        <u v-if="deviceDatas.dayOutNumber != null" v-for="(item,index) in deviceDatas.dayOutNumber + ''"
                           :key="index">{{item}}</u>
                        <span>人</span>
                    </div>
                    <div class="orangeText">当日最高峰时段 {{deviceDatas.tallestTime}}</div>
                    <div class="parkNumBox">
                        <div class="parkNumItem">
                            <div class="top">
                                <span>{{deviceDatas.putMainNum}}</span>
                                <u>个</u>
                            </div>
                            <div class="bottom">入口闸机在线设备</div>
                        </div>
                        <div class="parkNumItem">
                            <div class="top">
                                <span>{{deviceDatas.outMainNum}}</span>
                                <u>个</u>
                            </div>
                            <div class="bottom">出口闸机在线设备</div>
                        </div>
                    </div>
                    <!-- <div class="parkNumBox">
                        <div class="parkNumItem">
                            <div class="top">
                                <span>{{deviceDatas.theoryThroughNum}}</span>
                                <u>人</u>
                            </div>
                            <div class="bottom">理论每分钟通行人数</div>
                        </div>
                        <div class="parkNumItem">
                            <div class="top">
                                <span>{{deviceDatas.realityThroughNum}}</span>
                                <u>人</u>
                            </div>
                            <div class="bottom">实际每分钟通行人数</div>
                        </div>
                    </div> -->
                    <div class="gateBox">
                        <div class="gateItem">
                            <span>{{zhaji1.name}} 状态</span>
                            <img src="../../static/public/img/in.png" v-if="zhaji1.isOpen == 0">
                            <b class="inColor" v-if="zhaji1.isOpen == 0 ">入口</b>
                            <img src="../../static/public/img/out.png" v-if="zhaji1.isOpen == 1">
                            <b class="outColor" v-if="zhaji1.isOpen == 1 ">出口</b>
                        </div>
                        <div class="gateItem">
                            <span>{{zhaji2.name}} 状态</span>
                            <img src="../../static/public/img/in.png" v-if="zhaji2.isOpen == 0">
                            <b class="inColor" v-if="zhaji2.isOpen == 0 ">入口</b>
                            <img src="../../static/public/img/out.png" v-if="zhaji2.isOpen == 1">
                            <b class="outColor" v-if="zhaji2.isOpen == 1 ">出口</b>
                        </div>
                    </div>
                    <!-- <div class="gateBox">
                        <div class="gateItem">
                            <span>{{zhaji3.name}} 状态</span>
                            <img src="../../static/public/img/in.png" v-if="zhaji3.type == '入口'">
                            <b class="inColor" v-if="zhaji3.type == '入口'">{{zhaji3.type}}</b>
                            <img src="../../static/public/img/out.png" v-if="zhaji3.type == '出口'">
                            <b class="outColor" v-if="zhaji3.type == '出口'">{{zhaji3.type}}</b>
                        </div>
                    </div> -->
                </div>
                <div class="title title2">近七天导览使用次数</div>
                <div class="weekDatasTitle">
                    <i></i><span>总导览次数</span><b>{{sevenArr.totalNumber}}</b><span style="margin-left: 4px;">次</span>
                </div>
                <div id="sevenLoad" style="height: 190px;width: 374px;"></div>
                <hr/>
                <div class="title title3" @click="openWindow(1)">智能灌溉<i class="threeBar" title="打开智能灌溉" ></i></div>
                <div class="marksBox">
                    <div>
                        <span>月灌溉次数</span>
                        <b>{{irrigationObj.monthIrrigateNum}}</b>
                        <span>次</span>
                    </div>
                    <div>
                        <span>月灌溉用水量</span>
                        <b>{{irrigationObj.monthNum}}</b>
                        <span>t</span>
                    </div>
                </div>
                <div class="chartBox">
                    <div id="irrigation" style="width: 374px;height: 200px;"></div>
                    <div class="numStyle numStyle1">{{irrigationObj.onLineNumber}}</div>
                    <div class="numStyle numStyle2">个</div>
                    <div class="rateBox rateBox1">
                        <div style="width: 105px;margin:0 10px 20px 0;">
                            <div style="line-height: 18px;margin-bottom: 4px;">
                                <b>{{irrigationObj.rainNumber}}</b><u>个</u>
                            </div>
                            <div style="line-height: 12px;">
                                <i></i><span>雨量传感器设备</span>
                            </div>
                        </div>
                        <div style="width: 90px;margin-bottom: 15px;">
                            <div style="line-height: 18px;margin-bottom: 4px;">
                                <b>{{irrigationObj.soilNumber}}</b><u>个</u>
                            </div>
                            <div style="line-height: 12px;">
                                <i></i><span>土壤设备</span>
                            </div>
                        </div>
                        <div style="width: 105px;margin:0 10px 20px 0;">
                            <div style="line-height: 18px;margin-bottom: 4px;">
                                <b>{{irrigationObj.meterNumber}}</b><u>个</u>
                            </div>
                            <div style="line-height: 12px;">
                                <i></i><span>水表传感器设备</span>
                            </div>
                        </div>
                        <div style="width: 90px;">
                            <div style="line-height: 18px;margin-bottom: 4px;">
                                <b>{{irrigationObj.magnetismNumber}}</b><u>个</u>
                            </div>
                            <div style="line-height: 12px;">
                                <i></i><span>电磁阀设备</span>
                            </div>
                        </div>
                        <div style="width: 105px;margin:0 10px 20px 0;">
                            <div style="line-height: 18px;margin-bottom: 4px;">
                                <b>{{irrigationObj.runNumber}}</b><u>个</u>
                            </div>
                            <div style="line-height: 12px;">
                                <i></i><span>执行设备数量</span>
                            </div>
                        </div>
                        <div style="width: 90px;">
                            <div style="line-height: 18px;margin-bottom: 4px;">
                                <b class="colorBroken">{{([(irrigationObj.rainNumber + irrigationObj.soilNumber + irrigationObj.meterNumber + irrigationObj.magnetismNumber - irrigationObj.onLineNumber) / (irrigationObj.rainNumber + irrigationObj.soilNumber + irrigationObj.meterNumber + irrigationObj.magnetismNumber)] * 100).toFixed(2)}}</b><u>%</u>
                            </div>
                            <div style="line-height: 12px;">
                                <i></i><span>故障率</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottomBox" v-show="showHide">
            <div class="markBg">
                <div class="bt1">
                    <div class="title title3" @click="openWindow(2)">智能广播<i class="threeBar" title="打开智能广播"></i></div>
                    <div id="radioChart" style="width: 400px;height: 222px;"></div>
                    <div class="numStyle numStyle1">{{grassRadioObj.onLine + outRadioObj.onLine}}</div>
                    <div class="numStyle numStyle2">个</div>
                    <div class="rateBox">
                        <div style="width: 115px;margin:0 10px 20px 0;">
                            <div style="line-height: 18px;margin-bottom: 4px;">
                                <b>{{grassRadioObj.onLine}}</b><u>个</u>
                            </div>
                            <div style="line-height: 12px;">
                                <i></i><span>草坪音箱在线设备</span>
                            </div>
                        </div>
                        <div style="width: 115px;margin-bottom: 15px;">
                            <div style="line-height: 18px;margin-bottom: 4px;">
                                <b>{{outRadioObj.onLine}}</b><u>个</u>
                            </div>
                            <div style="line-height: 12px;">
                                <i></i><span>室外音柱在线设备</span>
                            </div>
                        </div>
                        <div style="width: 115px;margin:0 10px 20px 0;">
                            <div style="line-height: 18px;margin-bottom: 4px;">
                                <b>{{grassRadioObj.playNum}}</b><u>个</u>
                            </div>
                            <div style="line-height: 12px;">
                                <i></i><span>草坪音箱执行设备</span>
                            </div>
                        </div>
                        <div style="width: 115px;">
                            <div style="line-height: 18px;margin-bottom: 4px;">
                                <b>{{outRadioObj.playNum}}</b><u>个</u>
                            </div>
                            <div style="line-height: 12px;">
                                <i></i><span>室外音柱执行设备</span>
                            </div>
                        </div>
                        <div style="width: 115px;margin:0 10px 20px 0;">
                            <div style="line-height: 18px;margin-bottom: 4px;">
                                <b class="colorBroken">{{grassRadioObj.offLineRate}}</b><u>%</u>
                            </div>
                            <div style="line-height: 12px;">
                                <i></i><span>草坪音响故障率</span>
                            </div>
                        </div>
                        <div style="width: 115px;">
                            <div style="line-height: 18px;margin-bottom: 4px;">
                                <b class="colorBroken">{{outRadioObj.offLineRate}}</b><u>%</u>
                            </div>
                            <div style="line-height: 12px;">
                                <i></i><span>室外音柱故障率</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bt1">
                    <div class="title title3" @click="openWindow(3)">智能屏<i class="threeBar" title="打开智能屏" ></i></div>
                    <div id="screenChart" style="width: 400px;height: 222px;"></div>
                    <div class="numStyle numStyle1">{{allScreenObj.onLine}}</div>
                    <div class="numStyle numStyle2">个</div>
                    <div class="rateBox rateBox1">
                        <div style="width: 115px;margin:0 10px 10px 0;">
                            <div style="line-height: 18px;margin-bottom: 4px;">
                                <b>{{comScreenObj.onLine}}</b><u>个</u>
                            </div>
                            <div style="line-height: 12px;">
                                <i></i><span>综合导览在线设备</span>
                            </div>
                        </div>
                        <div style="width: 115px;margin-bottom: 15px;">
                            <div style="line-height: 18px;margin-bottom: 4px;">
                                <b>{{comScreenObj.playNum}}</b><u>个</u>
                            </div>
                            <div style="line-height: 12px;">
                                <i></i><span>综合导览执行设备</span>
                            </div>
                        </div>
                        <div style="width: 115px;margin:0 10px 10px 0;">
                            <div style="line-height: 18px;margin-bottom: 4px;">
                                <b>{{intScreenObj.onLine}}</b><u>个</u>
                            </div>
                            <div style="line-height: 12px;">
                                <i></i><span>智能导览在线设备</span>
                            </div>
                        </div>
                        <div style="width: 115px;">
                            <div style="line-height: 18px;margin-bottom: 4px;">
                                <b>{{intScreenObj.playNum}}</b><u>个</u>
                            </div>
                            <div style="line-height: 12px;">
                                <i></i><span>智能导览执行设备</span>
                            </div>
                        </div>
                        <div style="width: 115px;margin:0 10px 10px 0;">
                            <div style="line-height: 18px;margin-bottom: 4px;">
                                <b>{{ledScreenObj.onLine}}</b><u>个</u>
                            </div>
                            <div style="line-height: 12px;">
                                <i></i><span>LED设备在线数量</span>
                            </div>
                        </div>
                        <div style="width: 115px;">
                            <div style="line-height: 18px;margin-bottom: 4px;">
                                <b>{{ledScreenObj.playNum}}</b><u>个</u>
                            </div>
                            <div style="line-height: 12px;">
                                <i></i><span>LED设备执行数量</span>
                            </div>
                        </div>
                        <div style="width: 115px;margin:0 10px 10px 0;">
                            <div style="line-height: 18px;margin-bottom: 4px;">
                                <b class="colorBroken">{{comScreenObj.offLineRate}}</b><u>%</u>
                            </div>
                            <div style="line-height: 12px;">
                                <i></i><span>综合导览故障率</span>
                            </div>
                        </div>
                        <div style="width: 115px;">
                            <div style="line-height: 18px;margin-bottom: 4px;">
                                <b class="colorBroken">{{intScreenObj.offLineRate}}</b><u>%</u>
                            </div>
                            <div style="line-height: 12px;">
                                <i></i><span>智能导览故障率</span>
                            </div>
                        </div>
                        <div style="width: 115px;">
                            <div style="line-height: 18px;margin-bottom: 4px;">
                                <b class="colorBroken">{{ledScreenObj.offLineRate}}</b><u>%</u>
                            </div>
                            <div style="line-height: 12px;">
                                <i></i><span>LED设备故障率</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bt2">
                    <div class="title title1">总单体建筑用水量</div>
                    <div class="tabTitleBox">
                        <div class="tabTitleItem">
                            <div>
                                <b>{{waterObj.onLineNumber}}</b>
                                <span>个</span>
                            </div>
                            <div>
                                <i></i>
                                <span>在线设备</span>
                            </div>
                        </div>
                        <div class="tabTitleItem">
                            <div>
                                <b>{{waterObj.dayValue | toMillionNums}}</b>
                                <span v-if="waterObj.dayValue > 9999">万</span>
                                <span>t</span>
                            </div>
                            <div>
                                <i></i>
                                <span>日用水量</span>
                            </div>
                        </div>
                        <div class="tabTitleItem">
                            <div>
                                <b>{{waterObj.monthValue | toMillionNums}}</b>
                                <span v-if="waterObj.monthValue > 9999">万</span>
                                <span>t</span>
                            </div>
                            <div>
                                <i></i>
                                <span>月用水量</span>
                            </div>
                        </div>
                    </div>
                    <div class="lineTitle">
                        <span>近七天用水量趋势</span>
                        <div>
                            <span class="emptyLine" style="width: 180px;"></span>
                            <!--<img src="../../static/img/common/dottedLine.png" style="width: 180px;">-->
                            <img src="../../static/img/common/dian.png" class="dian">
                        </div>
                    </div>
                    <div id="waterChart" style="height:140px;width: 340px;"></div>
                </div>
                <div class="bt2">
                    <div class="title title1">总单体建筑用电量</div>
                    <div class="tabTitleBox">
                        <div class="tabTitleItem">
                            <div>
                                <b>{{electricObj.onLineNumber}}</b>
                                <span>个</span>
                            </div>
                            <div>
                                <i></i>
                                <span>在线设备</span>
                            </div>
                        </div>
                        <div class="tabTitleItem">
                            <div>
                                <b>{{electricObj.dayValue | toMillionNums}}</b>
                                <span v-if="electricObj.dayValue > 9999">万</span>
                                <span>kwh</span>
                            </div>
                            <div>
                                <i></i>
                                <span>日用电量</span>
                            </div>
                        </div>
                        <div class="tabTitleItem">
                            <div>
                                <b>{{electricObj.monthValue | toMillionNums}}</b>
                                <span v-if="electricObj.monthValue > 9999">万</span>
                                <span>kwh</span>
                            </div>
                            <div>
                                <i></i>
                                <span>月用电量</span>
                            </div>
                        </div>
                    </div>
                    <div class="lineTitle">
                        <span>近七天用电量趋势</span>
                        <div>
                            <span class="emptyLine" style="width: 180px;"></span>
                            <!--<img src="../../static/img/common/dottedLine.png" style="width: 180px;">-->
                            <img src="../../static/img/common/dian.png" class="dian">
                        </div>
                    </div>
                    <div id="electricChart" style="height:140px;width: 340px;"></div>
                </div>
            </div>
        </div>

        <div class="left" v-show="!showHide">
            <div class="markBg">
                <div class="title title1">总单体建筑用气量</div>
                <div class="tabTitleBox">
                    <div class="tabTitleItem">
                        <div>
                            <b>{{airObj.onLineNumber}}</b>
                            <span>个</span>
                        </div>
                        <div>
                            <i></i>
                            <span>在线设备</span>
                        </div>
                    </div>
                    <div class="tabTitleItem">
                        <div>
                            <b>{{airObj.dayValue | toMillionNums}}</b>
                            <span v-if="airObj.dayValue > 9999">万</span>
                            <span>m³</span>
                        </div>
                        <div>
                            <i></i>
                            <span>日用气量</span>
                        </div>
                    </div>
                    <div class="tabTitleItem">
                        <div>
                            <b>{{airObj.monthValue | toMillionNums}}</b>
                            <span v-if="airObj.monthValue > 9999">万</span>
                            <span>m³</span>
                        </div>
                        <div>
                            <i></i>
                            <span>月用气量</span>
                        </div>
                    </div>
                </div>
                <div class="lineTitle">
                    <span>近七天用气量趋势</span>
                    <div>
                        <span class="emptyLine" style="width: 210px;"></span>
                        <!--<img src="../../static/img/common/dottedLine.png" style="width: 200px;">-->
                        <img src="../../static/img/common/dian.png" class="dian">
                    </div>
                </div>
                <div id="ariChart" style="height:140px;width: 374px;"></div>
                <hr/>
                <div class="title title1">当日设备运维情况</div>
                <div class="deviceOpDiv">
                    <div id="deviceOp" style="height:110px;width: 374px;"></div>
                    <div class="opNum">{{opObj.number1}}</div>
                    <div class="opText">件</div>
                </div>
                <div class="parkNumBox" style="margin: 10px 10px">
                    <div class="parkNumItem">
                        <div class="top">
                            <span>{{opObj.number4}}</span>
                            <u>件</u>
                        </div>
                        <div class="bottom">本月已处理事件</div>
                    </div>
                    <div class="parkNumItem">
                        <div class="top">
                            <span>{{opObj.number5}}</span>
                            <u>件</u>
                        </div>
                        <div class="bottom">本月未处理事件</div>
                    </div>
                </div>
                <hr/>
                <div class="title title1" style="width: 220px; cursor: pointer;" @click="openThingsTable('open')">公共设施事件统计<i class="threeBar" title="打开今日公共设施事件数据"></i></div>
                <div class="marksBox">
                    <div>
                        <span>月事件统计</span>
                        <b>{{thingsNumsObj.monthNumber | toMillionNums}}</b>
                        <span v-if="thingsNumsObj.monthNumber > 9999">万</span>
                        <span>件</span>
                    </div>
                    <div>
                        <span>总事件统计</span>
                        <b>{{thingsNumsObj.totalNumber | toMillionNums}}</b>
                        <span v-if="thingsNumsObj.totalNumber > 9999">万</span>
                        <span>件</span>
                    </div>
                </div>
                <div class="lineTitle">
                    <span>当日公共设施事件数据</span>
                    <div>
                        <span class="emptyLine" style="width: 180px;"></span>
                        <!--<img src="../../static/img/common/dottedLine.png" style="width: 180px;">-->
                        <img src="../../static/img/common/dian.png" class="dian">
                    </div>
                </div>
                <div class="publicThingsDiv">
                    <div id="publicThings" style="width: 354px;height: 120px;"></div>
                    <div class="numStyle numStyle1">{{thingsNumsObj.dayNumber}}</div>
                    <div class="numStyle numStyle2">件</div>
                    <div class="rateBox rateBox1">
                        <div style="width: 90px;margin:0 10px 15px 0;" v-for="(item,index) in thingsNumsObj.oneList"
                             :key="index">
                            <div style="line-height: 18px;margin-bottom: 4px;">
                                <b>{{item.number}}</b><u>件</u>
                            </div>
                            <div style="line-height: 12px;">
                                <i :class="'icolor' + (index + 1)"></i><span>{{item.typeName}}</span>
                            </div>
                        </div>
                        <!--<div style="margin-bottom: 15px;">-->
                        <!--<div style="line-height: 18px;margin-bottom: 4px;">-->
                        <!--<b>6</b><u>件</u>-->
                        <!--</div>-->
                        <!--<div style="line-height: 12px;">-->
                        <!--<i class="icolor2"></i><span>信息发布事件</span>-->
                        <!--</div>-->
                        <!--</div>-->
                    </div>
                    <!--<div class="rateBox rateBox2">-->
                    <!--<div style="width: 90px;margin:0 10px 15px 0;">-->
                    <!--<div style="line-height: 18px;margin-bottom: 4px;">-->
                    <!--<b>10</b><u>件</u>-->
                    <!--</div>-->
                    <!--<div style="line-height: 12px;">-->
                    <!--<i class="icolor1"></i><span>智慧灌溉事件</span>-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--<div style="margin-bottom: 15px;">-->
                    <!--<div style="line-height: 18px;margin-bottom: 4px;">-->
                    <!--<b>8</b><u>件</u>-->
                    <!--</div>-->
                    <!--<div style="line-height: 12px;">-->
                    <!--<i class="icolor2"></i><span>入园系统事件</span>-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--</div>-->
                </div>
                <div class="lineTitle">
                    <span>近七天公共设施发生事件数据</span>
                    <div>
                        <span class="emptyLine" style="width: 140px;"></span>
                        <!--<img src="../../static/img/common/dottedLine.png" style="width: 140px;">-->
                        <img src="../../static/img/common/dian.png" class="dian">
                    </div>
                </div>
                <div class="weekDatasTitle">
                    <i></i><span>近七天公共设施总事件数量</span><b>{{sevenAfToalNum}}</b><span style="margin-left: 4px;">件</span>
                </div>
                <div id="sevenAllThing" style="width:354px;height: 190px;margin: 0 10px;"></div>
            </div>
        </div>
        <div class="bottomBox bottomBox1" v-show="!showHide">
            <div class="markBg1" style="width: 404px;">
                <div class="title title1">今日故障设备分析</div>
                <div id="dayBroken" style="width: 384px;height: 222px;margin: 0 10px;"></div>
            </div>
        </div>

        <!--弹窗 START-->
        <div class="windowAlert" v-show="alertWindowShow" ref="windowBox1">
            <div class="title" style="display:block;">{{windowTitle}}</div>
            <span class="close" @click="closeThreeWindow"></span>
            <div class="alertTitle">当前设定策略</div>
            <div class="headTitle">
                <span>序号</span>
                <span>名称</span>
                <span>开启时间</span>
                <span v-if="openType == 1">设备组数量</span>
                <span v-if="openType == 2">音频数量</span>
                <span v-if="openType == 3">视频数量</span>
            </div>
            <div class="mainCon" v-for="(item,index) in tableData" :key="index">
                <span>{{index + 1}}</span>
                <span v-if="openType == 1">{{item.strategyName}}</span>
                <span v-if="openType == 2 || openType == 3">{{item.name}}</span>
                <span>{{item.createTime}}</span>
                <span v-if="openType == 1">{{item.groupNumber}}</span>
                <span v-if="openType == 2 || openType == 3">{{item.musicCount}}</span>
            </div>
            <el-pagination :current-page.sync="currentPageInit"
                           layout="prev, pager, next"
                           :page-size="5" align="center"
                           @current-change="handleCurrentChange"
                           style="margin-top: 10px;" :total="total"></el-pagination>
        </div>
        <!--弹窗 END-->

        <!--事件类型分析弹窗 START-->
        <div class="thingWindow" v-show="thingsTable" ref="windowBox">
            <div class="title">今日公共设施事件数据</div>
            <div class="windowBox clearfix">
                <span class="closeWindow" @click="openThingsTable" title="关闭今日公共设施事件数据"></span>
                <div class="headTitle">
                    <span>名称</span>
                    <span>类型</span>
                    <span>时间</span>
                    <span>状态</span>
                </div>
                <div class="mainCon" v-for="(item,index) in tableThingsData" :key="index">
                    <span>{{item.affairName}}</span>
                    <span>{{item.typeName}}</span>
                    <span>{{item.affairTime}}</span>
                    <span v-if="item.status == 1 || item.status == 2" class="noHandle">未处理</span>
                    <span v-if="item.status == 3">已处理</span>
                </div>
                <el-pagination
                        layout="prev, pager, next"
                        align="center"
                        @current-change="handleCurrentChangeThings"
                        style="position: absolute;left: 0;bottom: 20px;right: 0;"
                        :total="totalThings">
                </el-pagination>
            </div>
        </div>
        <!--事件类型分析弹窗 END-->


        <!-- 点位信息 -->
        <all-marker ref="allMarker" :map-data="mapData"></all-marker>
        <!--        <allin-marker ref="allMarker" class="allinMarker" :select-arr="selectArr" :select-menu-arr="selectMenu" @setmapdata="setMarake" ></allin-marker>-->
    </div>
</template>

<script type="javascript" src="./public.js"></script>
<style lang="scss" src="./public.scss"></style>